import {ConfigProvider, theme as antdTheme} from "antd";
import {FC, ReactNode} from "react";
import {useTheme} from "@/contexts/ThemeContext.tsx";


const ThemeConsumer: FC<{ children: ReactNode }> = ({children}) => {
    const {theme} = useTheme();

    return (
        <div className={`theme-transition ${theme}-theme`}>
            <ConfigProvider
                theme={{
                    algorithm: theme === 'dark'
                        ? antdTheme.darkAlgorithm
                        : antdTheme.defaultAlgorithm,
                    components: {
                        Menu: {
                            // 动态CSS变量
                            itemColor: theme === 'dark' ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.88)',
                            itemHoverColor: theme === 'dark' ? '#ffffff' : '#1677ff',
                            itemSelectedColor: '#1677ff',
                            itemBg: theme === 'dark' ? '#141414' : '#ffffff',
                            darkItemBg: theme === 'dark' ? '#141414' : '#ffffff',
                        }
                    }
                }}
            >
                {children}
            </ConfigProvider>
        </div>


    );
};
export default ThemeConsumer;